<template>
  <div id="mylist">


    
    <group>
      <cell
      :title="$t('message.projectItem')"
      is-link
      :value="$t('迷你')"
      :border-intent="false"
      :arrow-direction="showContent002 ? 'up' : 'down'"
      @click.native="showContent002 = !showContent002"></cell>

      <template v-if="showContent002">
        <div v-for="(value,key,index) in  this.array" :key='index' class="listbox1">
            <div class="listbox2">
                <div class="listbox3">
                 <label class="fl">{{value.label}}</label>
            <span class="fr">{{value.value}}</span>
                </div>

            </div>

        </div>
        <x-button mini type="primary" class="refundBtn">{{$t('message.Userrefund')}}</x-button>
      </template>

    </group>




  </div>
</template>


<script type="text/ecmascript-6">
/* eslint-disable*/
import { Cell, CellBox, CellFormPreview, Group, Badge,XButton } from "vux";

import { myApply } from "@/api/myapply.js";

export default {
  // props:['listData','lists'],
  props: {
    listData: {
      type: Array,
      required: true
    },
    lists: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
    data:[],
    item003:false,
      showContent002: false,
      showContent001: true,
    //   showContent002: false,

      type: "迷你",
      property: []
    };
  },
  created() {

    
    this.changes();
  },
  methods: {
    changes: function() {
      console.log(this.lists)


      this.array = [];
        // console.log(this.lists);

      for (let k in this.lists) {
        let obj = {};
        if (k === "eventid") {
          obj.label = "报名表ID";
          obj.value = this.lists[k];
        } else if (k === "name") {
          obj.label = "姓名";
          obj.value = this.lists[k];
        } else if (k === "idtype") {
          obj.label = "证件类型";
          obj.value = this.lists[k];
        } else if (k === "idnum") {
          obj.label = "证件号";
          obj.value = this.lists[k];
        } else if (k === "national") {
          obj.label = "国籍";
          obj.value = this.lists[k];
        } else if (k === "country") {
          obj.label = "居住国家";
          obj.value = this.lists[k];
        } else if (k === "province") {
          obj.label = "居住城市";
          obj.value = this.lists[k];
        } else if (k === "address") {
          obj.label = "居住地址";
          obj.value = this.lists[k];
        } else if (k === "blood") {
          obj.label = "血型";
          obj.value = this.lists[k];
        } else if (k === "cloth") {
          obj.label = "衣服尺寸";
          obj.value = this.lists[k];
        } else if (k === "mobile") {
          obj.label = "手机号";
          obj.value = this.lists[k];
        } else if (k === "email") {
          obj.label = "邮箱";
          obj.value = this.lists[k];
        } else if (k === "emername") {
          obj.label = "紧急联系人姓名";
          obj.value = this.lists[k];
        } else if (k === "emermobile") {
          obj.label = "紧急联系人电话";
          obj.value = this.lists[k];
        } else if (k === "birth") {
          obj.label = "出生日期";
          obj.value = this.lists[k];
        } else if (k === "gender") {
          obj.label = "性别";
          obj.value = this.lists[k];
        } else {
          obj.label = k;
          obj.value = this.lists[k];
        }

        this.array.push(obj);
        // this.datas.push(this.array)

      }



    }
  },
  components: {
    Cell,
    CellBox,
    CellFormPreview,
    Group,
    Badge,
    XButton
  }
};
</script>


<style lang="less" rel="stylesheet/less">
#mylist {
  width: 100%;
}
.listbox1 {
  padding: 10px 15px;
  position: relative;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  line-height: 1.41176471;
  font-size: 17px;
}
.listbox2 {
  width: 100%;
  padding: 0;
  font-size: 0.9em;
  text-align: right;
  color: #999999;
  line-height: 2;
}
.listbox3 {
  overflow: hidden;
}
span {
  color: #999999;
}
.fl {
  float: left;
  margin-right: 1em;
  min-width: 4em;
  color: #999999;
  text-align: justify;
  text-align-last: justify;
}
.fr {
  display: block;
  overflow: hidden;
  word-break: normal;
  word-wrap: break-word;
}

</style>

